<template>
  <div class="detail" :style="{backgroundImage: 'url(' +background + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
    <Header>
      <span slot="middle">全部歌曲 </span>
    </Header>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="playmusic" v-for="item in songs" :key="item.id" >
        <div class="left" @click="gomusictext(item.id)">
          {{ item.name }}
        </div>
        <van-icon name="music" @click="geturl(item.id)" />
      </div>
      <audio
        :src="songUrl.url"
        controls
        class="audio"
        autoplay
      ></audio>
    </van-list>

  </div>
</template>

<script>
import { reqmusics, reqdetailAPI, getUrlAPI } from "../../api/music";
import Header from "../../components/NavBar.vue";
export default {
  data() {
    return {
      list: [],
      songs: [],
      songsUrl: [],
      songUrl:[],
      loading: false,
      finished: false,
      background:"",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //初始化歌单歌曲ids
    async initmusicdetail(id) {
      const result = await reqmusics(id);
      console.log(result);
      const arr = result.playlist.trackIds;
      this.background = result.playlist.creator.backgroundUrl;
      arr.forEach((item) => {
        this.list.push(item.id);
      });
      //处理歌曲ids格式传递参数
      let res = this.list.reduce((sum, item) => sum + item + ",", "");

      const index = res.lastIndexOf(",");
      res = res.substring(0, index - 1);
      //   console.log(res);
      this.initplay(res);
    },
    //获取歌曲详情
    async initplay(res) {
      const result = await reqdetailAPI(res);
      console.log(result);
      this.songs = result.songs;
      //调用获取全部url接口
      this.getAllurl();
    },
    //获取单首音乐URL
    async geturl(id) {
        // const result = await getUrlAPI(id);
        // console.log(result);
        // if (result.code == 200) {
        //   this.songsUrl = result.data[0];
        // }
      this.songUrl = this.songsUrl.filter((item) => item.id == id)[0];
    //   console.log(this.songUrl);
    },
    //获取全部音乐url
    async getAllurl() {
      const arr = [];
      this.songs.forEach((item) => {
        arr.push(item.id);
      });
      //处理歌曲ids格式传递参数
      let res = arr.reduce((sum, item) => sum + item + ",", "");

      const index = res.lastIndexOf(",");
      res = res.substring(0, index - 1);

      const result = await getUrlAPI(res);
      console.log(result);
      if (result.code == 200) {
        this.songsUrl = result.data;
      }
    },
    
    //跳转歌词页面
    gomusictext(id){
      this.$router.push(`/musictext/${id}`)
    },


    onLoad() {
      this.finished = true;
    },
  },
  created() {
    const id = this.$route.params.id;
    this.initmusicdetail(id);
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.playmusic {
  display: flex;
  padding: 12px;
  box-shadow: 0 0 1px;
}
.playmusic .left {
  flex: 1;
}
.audio {
  position: absolute;
  bottom: 50px;
  width: 100%;
  height: 40px;
}
.van-icon {
  font-size: 25px;
  color: #ff2317;
  vertical-align: middle;
}
.van-list {
  background-color: #f7f7f7;
  opacity: 0.7;
}
</style>